/*
 * @Author: wangguanqing 
 * @Date: 2018-06-25 09:03:01 
 * @Last Modified by: mikey.zhaopeng
 * @Last Modified time: 2018-08-24 09:50:39
 */

<template>
  <div class="cyy_dataKb">
    <bg-lay-out :hideTopBar="true" :hideMarginLeft="true" :hideMask="true" :widthSize="true" :background="'url(../../../../../static/img/cyy/cyy_bg.jpg) left top no-repeat / 100% 100%'">
        <div slot="main" class="bestrideAreaShop">
            <div class="map">
                <div class="dayTrade">
                    <div class="price">
                      <p class="title">今日交易额</p>
                      <div class="deal">
                        <div class="num"><span>￥</span></div>
                        <turn-page-num :decimalnumStyle="'background:rgba(0,0,0,0.4)'" :numStyle="'background:rgba(0,0,0,0.4)'" v-model="totalData.tradingVolumeThisMonth"></turn-page-num>
                          <div class="txt"><span>&nbsp;同比&nbsp;</span></div>
                          <turn-page-num :decimal="false" :numStyle="'width: 30px;height: 50px;font-size: 30px;background:rgba(0,0,0,0.4)'" v-model="absTradingVolumeThisMonthRingRatio"></turn-page-num>
                          <div class="num"><span>%</span></div>
                            <i v-if="totalData.tradingVolumeThisMonthRingRatio > 0" class="el-icon-caret-top"></i>
                            <i v-if="totalData.tradingVolumeThisMonthRingRatio === 0"></i>
                            <i v-if="totalData.tradingVolumeThisMonthRingRatio < 0" class="el-icon-caret-bottom"></i>
                      </div>
                    </div>
                </div>
                <area-shop-map v-model="mapData"></area-shop-map>
            </div>
            <div class="dataDisplay">
                <top-logo-title>
                    <div slot="topTitle">产业园跨境电商数据</div>
                </top-logo-title>
                <div class="chart">
                  <!-- 国家合同总价TOP10 -->
                    <div class="nationalPrice">
                        <main-title>
                          <span slot="title">国家合同总价TOP10</span>
                        </main-title>
                        <bar-chart v-model="countryPriceArr" :chartStyle="'width:302px;min-height:400px;'" :option="barChartOption"></bar-chart>
                    </div>
                    <!-- 各月合同销售额(万元) -->
                    <div class="monthlySales">
                        <main-title>
                          <span slot="title">各月合同销售额(万元)</span>
                        </main-title>
                        <line-chart v-model="tradingInArr" :chartStyle="'width:402px;min-height:200px;'" :option="lineChartOption"></line-chart>
                    </div>
                    <!-- 询盘区域及占比 -->
                    <div class="areaOf">
                        <main-title>
                          <span slot="title">询盘区域及占比</span>
                        </main-title>
                        <halfpiechart v-model="halfpiechartData"></halfpiechart>
                    </div> 
                    <!-- 商品热度图示 -->
                    <div class="commodityHeat">
                        <main-title>
                          <span slot="title">商品热度图示</span>
                        </main-title>
                        <hot-chart v-model="productHeat"></hot-chart>
                    </div>
                </div>
            </div>
        </div>
    </bg-lay-out>
  </div>
</template>
<script>
import topLogoTitle from "@/components/cyy/topLogoTitle";
import mainTitle from "@/components/cyy/mainTitle";
import lineChart from "@/components/Charts/lineChart";
import barChart from "@/components/Charts/barChart";
import ICountUp from "vue-countup-v2";
import bgLayOut from "@/components/bgLayOut/index";
import liquidfillChart from "@/components/Charts/liquidfillChart.vue";
import hotChart from "./hotChart";
import halfpiechart from "./bestrideAreahalfpiechart.vue";
import areaShopMap from "@/components/cyy/bestrideAreaShopMap.vue";
import turnPageNum from "@/components/turnPageNum/index.vue";
import {
  GetIndustrialParkEcommerceData,
  GetDataByDoubleTarget,
  GetDetailList,
  GetShippingCountryList
} from "@/api/cyy/IndustrialParkForCrossBorderEcommerce";
export default {
  name: "sellAnalysis",
  components: {
    topLogoTitle,
    mainTitle,
    ICountUp,
    bgLayOut,
    turnPageNum,
    lineChart,
    liquidfillChart,
    hotChart,
    barChart,
    halfpiechart,
    areaShopMap
  },
  data() {
    return {
      mapData: [], // 地图数据
      productHeat: [], // 商品热度
      halfpiechartData: [], // 询盘占比
      totalData: {
        tradingVolumeThisMonth: null,
        tradingVolumeThisMonthRingRatio: null
      }, // 总数据
      absTradingVolumeThisMonthRingRatio: 0, // 同比绝对值
      barChartOption: {
        exchange: true,
        showLabel: true,
        xAxis: {
          axisLine: {
            show: false,
            lineStyle: {
              color: "rgba(40,231,135,0.5)"
            }
          },
          axisLabel: {
            show: false,
            rotate: 0
          },
          axisTick: {
            show: false
          }
        },
        grid: {
          right: "15%",
          left: "21%"
        },
        yAxis: {
          axisLine: {
            show: false,
            lineStyle: {
              color: "rgba(40,231,135,0.5)"
            }
          },
          axisTick: {
            show: false
          }
        },
        barWidth: 20
      },
      lineChartOption: {
        showLabel: true,
        grid: {
          left: "15%"
        },
        xAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(40,231,135,0.5)"
            }
          },
          axisLabel: {
            rotate: 0
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(40,231,135,0.5)"
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        startColor: "rgba(40,231,135,0.5)",
        endColor: "rgba(40,231,135,0.1)"
      },
      tradingInArr: [],
      countryPriceArr: [] // 国家合同总价
    };
  },
  mounted() {
    this.fechData();
  },
  methods: {
    fechData() {
      this.getTotalData();
      this.getCountryPriceArr();
      this.getProductHeatData();
      this.gethalfpiechartData();
      this.getTradingInArr();
      this.getMapData();
    },
    // 获取页面总数据
    async getTotalData() {
      const res = await GetIndustrialParkEcommerceData();
      if (res.data.code === "0") {
        this.$set(this, "totalData", res.data.result);
        var aaa = Number(
          res.data.result.tradingVolumeThisMonthRingRatio.toFixed(0)
        );
        this.$set(this, "absTradingVolumeThisMonthRingRatio", aaa);
      }
    },
    // 获取销售额数据
    async getTradingInArr() {
      const p = {
        timeType: "3010",
        queryType: "39001"
      };
      const res = await GetDetailList(p);
      if (res.data.code === "0") {
        res.data.result.forEach(item => {
          item.xData = item.xData.slice(5, item.xData.length);
        });
        this.$set(this, "tradingInArr", res.data.result);
      }
    },
    // 获取国家数据
    async getCountryPriceArr() {
      const p = {
        timeType: "3010",
        queryType: "39001"
      };
      const res = await GetDataByDoubleTarget(p);
      if (res.data.code === "0") {
        var top10Arr = [];
        for (var i = 10; i >= 0; i--) {
          switch (i) {
            case 0:
              res.data.result[i].barLinearColor = ["#F40F67", "#ED5A24"];
              break;
            case 1:
              res.data.result[i].barLinearColor = ["#F0BD26", "#F38F1E"];
              break;
            case 2:
              res.data.result[i].barLinearColor = ["#00FFFF", "#00D1FF"];
              break;
            default:
              res.data.result[i].barLinearColor = ["#28E787", "#008E45"];
          }
          top10Arr.push(res.data.result[i]);
        }
        this.$set(this, "countryPriceArr", top10Arr);
      }
    },
    // 获取商品热度数据
    async getProductHeatData() {
      const p = {
        queryType: "39002"
      };
      const res = await GetDataByDoubleTarget(p);
      if (res.data.code === "0") {
        this.$set(this, "productHeat", res.data.result);
      }
    },
    // 询盘区域及占比
    async gethalfpiechartData() {
      const p = {
        queryType: "39004"
      };
      const res = await GetDataByDoubleTarget(p);
      if (res.data.code === "0") {
        this.$set(this, "halfpiechartData", res.data.result);
      }
    },
    // 获取地图数据
    async getMapData() {
      const res = await GetShippingCountryList();
      if (res.data.code === "0") {
        this.$set(this, "mapData", res.data.result);
      }
    }
  }
};
</script>
<style>
@import "../../../../styles/jquery-barrager.css";
</style>

<style scoped lang="scss">
@import "../../../../styles/base/_parameters";
@mixin color($color1: #f0bd26, $color2: rgba(#006953, 0.5)) {
  color: $color1;
  background-color: $color2;
}
.bestrideAreaShop {
  .map {
    @include absoluteAllSides(0, 0, 0, 0, 1);
    // 今日交易额
    .dayTrade {
      display: flex;
      position: absolute;
      top: 190px;
      right: 0;
      left: 0;
      z-index: 1;
      color: #00ffff;
      .price {
        // width: 638px;
        height: 160px;
        margin: auto;
        .title {
          margin-bottom: 20px;
          font-size: 30px;
        }
        .numCon {
          display: flex;
          flex-direction: row;
          font-family: bold;
          color: red;
          .numUnit {
            font-size: 20px;
          }
          .num {
            font-size: 80px;
          }
        }
        // img {
        //   height: 106px;
        // }
        .deal {
          display: flex;
          justify-content: center;
          align-items: baseline;
          margin-top: 30px;
          & .txt {
            color: #00ffff;
            font-size: 22px;
          }
          .el-icon-caret-top {
            margin: 0 3px;
            color: red;
          }
          .el-icon-caret-bottom {
            margin: 0 3px;
            position: static;
            font-size: 25px;
            color: #28e787;
          }
          // i {
          //   display: inline-block;
          //   width: 30px;
          //   height: 66px;
          //   @include color;
          //   @include din(50px);
          //   text-align: center;
          // }
          & .num {
            span {
              color: #f0bd26;
              @include din(29px);
            }
          }
          & .number {
            margin-left: 10px;
            span {
              color: #00ffff;
              @include din(29px);
            }
          }
          // p:nth-of-type(1) {
          //   display: flex;
          //   align-items: flex-end;
          // }
          // p:nth-of-type(3) {
          //   display: flex;
          //   align-items: center;
          //   margin-left: 30px;
          // }
          // p:nth-of-type(3) span:nth-of-type(2) {
          //   margin-left: 20px;
          //   @include din(34px);
          // }
        }
      }
    }
    // 地图
  }
  .dataDisplay {
    @include absoluteAllSides(0, 0, 0, 0, 10);
    & .chart {
      @include absoluteAllSides(150, 40, 150, 75, 1);
      .nationalPrice {
        position: absolute;
        top: 0;
        left: 100px;
      }
      .monthlySales {
        position: absolute;
        bottom: 0;
        left: 50px;
      }
      .areaOf {
        position: absolute;
        right: 40px;
        top: 0;
      }
      .commodityHeat {
        position: absolute;
        right: 40px;
        bottom: 0;
      }
    }
  }
}
</style>